<button type="button" class="btn btn-primary" (click)="lgModal.show()">新增</button>

<div bsModal #lgModal="bs-modal" class="modal fade" tabindex="-1"
     role="dialog" aria-labelledby="dialog-sizes-name1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title pull-left">选择商品</h4>
                <button type="button" class="close pull-right" (click)="lgModal.hide()" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="container goods-content-box ">
                    <div class="row">

                        <div class="col-md-6">
                            <div class="row">
                                <div class="col-md-12">
                                    <form>
                                        <div class="form-row">
                                            <div class="col">
                                                <input type="text" [(ngModel)]="condition.serGoodsName" name="serGoodsName" class="form-control" placeholder="商品名称">
                                            </div>
                                            <div class="col">
                                                <input type="text" [(ngModel)]="condition.serNum" name="serNum" class="form-control" placeholder="商品编号">
                                            </div>
                                            <div class="col-2">
                                                <button (click)="searchGoods()" type="button" class="btn btn-primary " style="margin-left: 10px">查询</button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>

                            <div class="row my-table">
                                <div class="col-md-12">
                                    <table class="table table-bordered text-nowrap bg-light zero3-list-table wms-table  ">
                                        <thead>
                                        <tr>
                                            <th scope="col">#</th>
                                            <th scope="col">商品名称</th>
                                            <th scope="col">商品编号</th>
                                            <th scope="col">操作</th>
                                        </tr>
                                        </thead>
                                        <tbody>

                                        <tr  *ngFor="let item of goodsData?.page?.content; let i = index">
                                            <th scope="row">{{i + 1}}</th>
                                            <td>{{item?.serGoodsName}}</td>
                                            <td>{{item?.serNum}}</td>
                                            <td>
                                                <button (click)="doSelectItem(item)" type="button" class="btn btn-primary btn-sm"> 选择</button>
                                            </td>
                                        </tr>

                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div  *ngIf="selectedGoods" class="col-md-6 gd-detail" >
                            <div class="row">
                                <div class="col-md-6">
                                    <span>商品名称：</span><span>{{selectedGoods?.serGoodsName}}</span>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <span>商品编号：</span><span>{{selectedGoods?.serNum}}</span>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <span>备注：</span><span>{{selectedGoods?.serMemo}}</span>
                                </div>
                            </div>

                            <div class="row r-select">
                                <div class="col-md-6">
                                    <ng-select
                                            [(ngModel)]="formGuiGe"
                                            [items]="specTypes"
                                            [searchable]="true"
                                            bindLabel="name"
                                            bindValue="id"
                                            (change)="dealGuiGeChange($event)"
                                            placeholder="请选择商品规格">
                                    </ng-select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 商品信息-->
                    <div  *ngIf="searchFlag" class="goods-info-box">
                        <div class="row">
                            <div class="col-md-12 goods-btn-footer">
                                <button type="button" class="btn btn-primary" (click)="closeMod()" >取消</button>
                                <button type="button" class="btn btn-primary space-left" (click)="doSave()" >确定</button>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
